let A0, A1;//依赖
let A2;


A0 = ref()
A1 = ref()
A2 = ref()//订阅者
let A2Dom = document.querySelector('#A2')


function A0Change(e) {
  A0.value = Number(e.target.value)
  console.log(A0);
  // update()
}

function A1Change(e) {
  A1.value = Number(e.target.value)
  console.log(A1);
  // update()
}

//作用--A0,A1的订阅者
function update() {
  A2 = A0 && A1 ? A0 + A1 : null
  A2Dom.innerText = A2
}


// function reactive(obj) {
//   return new Proxy(obj, {
//     get(target, key) {
//       track(target, key)
//       return target[key]
//     },
//     set(target, key, value) {
//       target[key] = value
//       trigger(target, key)
//     }
//   })
// }


function ref(value) {
  const refObject = {
    get value() {
      track()
      return value
    },

    set value(newValue) {
      value = newValue
      trigger(refObject, 'value')
    }
  }

  return refObject
}


let activeEffect//这会在一个副作用就要运行之前被设置

// 检查当前是否有正在运行的副作用，如果有，我们会查找到一个存储了所有追踪了该属性的订阅者的set--A2订阅了A0和A1
function track(target, key) {
  if (activeEffect) {
    const effects = getSubscribersForProperty(target, key)
    effects.add(activeEffect)
  }
}


function trigger(target, key) {
  const effects = getSubscribersForProperty(target, key)
  effects.forEach((effects) => effects())
}


function getSubscribersForProperty(target, key) {

}


//
function whenDepsChange(update) {
  const effect = () => {
    activeEffect = effect
    update()
    activeEffect = null
  }
  effect()
}
